<template>
	<div>
		<div class="tou1">
			<el-steps :active="2" finish-status="success" simple style="margin-top: 20px">
			  <el-step title="1 项目信息" ></el-step>
			  <el-step title="2 回报设置" ></el-step>
			  <el-step title="3 确认信息" ></el-step>
			  <el-step title="4 完成" ></el-step>
			</el-steps>
		</div>
		
		<div>
			<h1 style="font-weight:normal;color: #D1C2D8;">|-- <span style="color: #409EFF;">{{this.projectName}}</span> --|回报信息</h1>
			<el-table :data="tableData" style="width: 100%">
		      <el-table-column prop="retuId" label="序号" ></el-table-column>
		      <el-table-column prop="payMoney" label="支付金额/元" ></el-table-column>
		      <el-table-column prop="retuType" label="回报类型">
				  <template slot-scope="scope">
					 <span v-if="scope.row.retuType==1">线上品牌商赞助</span>
					 <span v-if="scope.row.retuType==0">线下场地免费</span>
				  </template>
			  </el-table-column>
			  <el-table-column prop="retuText" label="回报内容"></el-table-column>
			  <el-table-column prop="isEmail" label="是否包邮/元">
				  <template slot-scope="scope">
				  	<span v-if="scope.row.isEmail==0">包邮</span>
				  	<span v-if="scope.row.isEmail==1">10元</span>
				  </template>
			  </el-table-column>
			  <el-table-column prop="limits" label="是否限购">
			  	<template slot-scope="scope">
			  		<span v-if="scope.row.limits==1">限购(默认数量为1/次)</span>
			  		<span v-if="scope.row.limits!=1">每次购买最多{{scope.row.limits}}/次</span>
			  	</template>
			  </el-table-column>
			  <el-table-column prop="retuNumber" label="名额"></el-table-column>
			  <el-table-column prop="retuTime" label="回报时间/天" width="180"></el-table-column>
			  <el-table-column fixed="right" label="操作" width="100">
			    <template slot-scope="scope">
			       <el-button @click="deleteRetuTableByRetuId(scope.row)" type="text" size="small">删除</el-button>
			    </template>
			  </el-table-column>
		    </el-table>
		</div>
			
		<div>
			<el-button type="success" plain @click="dialog = true">添加回报</el-button>
			<el-button type="primary" plain @click="queren()">下一步</el-button>

			<el-drawer title="添加回报!" style="width: 150%; height: 105%;" :before-close="handleClose" :visible.sync="dialog" direction="ltr" custom-class="demo-drawer" ref="drawer" >
			    <div class="demo-drawer__content" style="width: 100%;height:645px; #D1C2D8 solid 1px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);border-radius: 4px; overflow-y: scroll;">
			       <el-form :model="form" class="background-color: #909399;">
					   
					 <el-form-item label="回报类型" :label-width="formLabelWidth">
					   <el-radio-group v-model="form.resource">
					      <el-radio  label="1">线上品牌商赞助</el-radio>
					      <el-radio  label="0">线下场地免费</el-radio>
					   </el-radio-group>
					 </el-form-item>
					   
			         <el-form-item label="支付金额" :label-width="formLabelWidth">
			           <el-input style="width: 60%;" v-model="form.hMoney" autocomplete="off"></el-input>
			         </el-form-item>
					 
			         <el-form-item label="回报内容" :label-width="formLabelWidth">
			           <el-input type="textarea" v-model="form.Htext"></el-input>
			         </el-form-item>
					 
					 <el-form-item label="说明图片" :label-width="formLabelWidth">
					   
					   <el-upload
					     action="http://localhost:8080/upLoadImgs"
					     list-type="picture-card"
					     :on-success="handleAvatarSuccess1"
					     :on-remove="removeImgName"
					     :on-preview="handlePictureCardPreview">
					     <i class="el-icon-plus"></i>
						 <div slot="tip" class="el-upload__tip">图片上无文字,支持jpg、jpeg、png、gif格式，大小不超过2M，建议尺寸：740*457px</div>
					   </el-upload>
					   <el-dialog :visible.sync="dialogVisible">
					     <img width="100%" :src="dialogImageUrls" alt="">
					   </el-dialog>
					 </el-form-item>
					 
					 <el-form-item label="回报数量(名额)" :label-width="formLabelWidth">
					   <el-input style="width: 60%;" v-model="form.HNumber" autocomplete="off"></el-input>
					   <div class="el-upload__tip">"0"为不限回报数量，无限制</div>
					 </el-form-item>
					 
					 <el-form-item label="单笔限购" :label-width="formLabelWidth">
						 <el-input style="width: 20%;" v-model="form.xiangouNumber" autocomplete="off"></el-input>
						 <div class="el-upload__tip">默认数量为1，且不超过上方已设置的回报数量</div>
					 </el-form-item>
					   
					 <el-form-item label="是否包邮" :label-width="formLabelWidth">
					 	<el-radio-group v-model="form.isEmail">
					 	    <el-radio :label="2">包邮</el-radio>
					 	    <el-radio :label="1">不包邮</el-radio>
					 	</el-radio-group>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					 	  <span>(不包邮邮费10元)</span>
					 </el-form-item>
					 
					 <el-form-item label="回报时间" :label-width="formLabelWidth">
					   <div class="el-upload__tip">项目结束后<el-input style="width: 20%;" v-model="form.Htime" ></el-input>天，向支持者发送回报</div>
					 </el-form-item>
					 
			       </el-form>
			       <div class="demo-drawer__footer">
			         <el-button @click="cancelForm">取 消</el-button>
			         <el-button type="primary" @click="beforSubmit()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
			       </div>
			    </div>
			</el-drawer>
		</div>
	</div>
</template>

<script>
	export default {
	      data() {
	        return {
				w:'',
				dialog: false,
				loading: false,
				dialogImageUrls: [],
				dialogVisible: false,
				images:'',
				projectId: '',
				tableData: [],
				projectName: '',
				form: {
					/* 回报类型 */
			      resource: '1',
				  /* 回报支付金额*/
			      hMoney:'',
				  /* 回报说明*/
				  Htext:'',
				  /* 回报时间*/
				  Htime:'',
				  /* 回报数量*/
				  HNumber:'',
				  /* 限购数量*/
				  xiangouNumber:'',
				  /* 是否包邮*/
				  isEmail:0
			    },
				formLabelWidth: '80px',
				timer: null
	        };
	      },
		  mounted() {
		  	this.selectAllretuBypid()
			this.selectPBypid()
		  },
		  methods:{
			 
			/* 根据回报id删除该回报信息 */
			async deleteRetuTableByRetuId(row){
				var param = new URLSearchParams();
				param.append("retuId",row.retuId)
				var res =await this.$http.post("deleteRetuTableByRId",param);
				console.log(res.data)
				if(res.data.code==200){
					this.$message.success(res.data.message)
					this.selectAllretuBypid()
				} else {
					this.$message.error(res.data.message)
				}
			},
			/* 根据项目id查询该项目的信息 */
			async selectPBypid(){
				var projectId = window.sessionStorage.getItem("projectId")
				var param = new URLSearchParams();
				param.append("projectId",parseInt(projectId))
				var respro =await this.$http.post("selectProjectByProjectId",param);
				if(respro.data.code==200){
					this.projectName = respro.data.data.projectName
				} else {
					this.$message.error(res.data.message)
				}
			},
			/* 根据项目id查询所有该项目的回报信息 */
			async selectAllretuBypid(){
				var projectId = window.sessionStorage.getItem("projectId")
				var param = new URLSearchParams();
				param.append("projectId",parseInt(projectId))
				var res =await this.$http.post("selectRetuTableByPId",param);
				if(res.data.code==200){
					this.tableData = res.data.data
				} else {
					this.$message.error(res.data.message)
				}
			},
			/* 图片名称处理，信息不为空处理 */
			async beforSubmit(){
				for(var i =0;i<this.dialogImageUrls.length;i++){
				   this.images = this.images + this.dialogImageUrls[i] + ";"
				}
				if(this.form.resource!=''&&this.form.hMoney!=''&&this.form.Htext!=''&&this.form.Htime!=''&&this.form.HNumber!=''&&this.form.xiangouNumber!=''&&this.form.isEmail!=''&&this.images!=''){
					this.$refs.drawer.closeDrawer()
				}else{
					this.$message.error("信息填写不完整,请检查！")
				}
			},
			async onSubmit() {
				var projectId = window.sessionStorage.getItem("projectId")
				var param = new URLSearchParams();
				param.append("projectId",parseInt(projectId))
				param.append("retuType",this.form.resource)
				param.append("payMoney",this.form.hMoney)
				param.append("retuText",this.form.Htext)
				param.append("retuNumber",this.form.HNumber)
				param.append("limits",this.form.xiangouNumber)
				param.append("img",this.images)
				param.append("isEmail",this.form.isEmail)
				param.append("retuTime",this.form.Htime)
				var res =await this.$http.post("addRetuTable",param);
				if(res.data.code==200){
					this.$message.success(res.data.message)
					this.selectAllretuBypid()
				} else {
					this.$message.error(res.data.message)
				}
				// window.sessionStorage.removeItem("projectId")
				this.images=''
			},
			//图片上传
			async handlePictureCardPreview(file) {
				this.dialogImageUrls = file.url;
				this.dialogVisible = true;
			},
			async handleAvatarSuccess1(res, file) {
				this.dialogImageUrls.push(res.data)
			},
			async removeImgName(file, dialogImageUrls){
				if(this.dialogImageUrls.index = file){
					this.dialogImageUrls.pop(file)
				}
			},
			queren(){
			  	this.$router.push('/queren')
			},
			handleClose(done) {
			  if (this.loading) {
			    return;
			  }
			  this.$confirm('确定要提交表单吗？')
			    .then(_ => {
			      this.loading = true;
			      this.timer = setTimeout(() => {
			        done();
			        // 动画关闭需要一定的时间
			        setTimeout(() => {
						/* 提交回报数据 */
					  this.onSubmit()
			          this.loading = false;
			        }, 400);
			      }, 2000);
			    })
			  .catch(_ => {});
			},
			cancelForm() {
			   this.loading = false;
			   this.dialog = false;
			   clearTimeout(this.timer);
			}
		  }
	}
</script>

<style>
	  .wei{
	  	width: 100%;
	  	/* height: 800px; */
	  	border-bottom: #D1C2D8 solid 1px;
	  }
</style>
